import React, { useEffect, useState, useRef } from 'react';
import { BiChevronRight } from "react-icons/bi";
import { FaTachometerAlt, FaBarcode } from "react-icons/fa";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCamera } from '@fortawesome/free-solid-svg-icons';
import Navbar from '../Navbar.jsx';
import Sidebar from '../Sidebar.jsx';
import LoadingScreen from '../../Loading.jsx';
import { useNavigate, Link, useSearchParams } from 'react-router-dom';
import axios from 'axios';
import Select from 'react-select';
import { BrowserMultiFormatReader } from '@zxing/library';
import dayjs from 'dayjs';

// Axios instance
const api = axios.create({ baseURL: "https://mybackend-l7om.onrender.com/api" });
api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401 || error.response?.status === 403) {
      localStorage.removeItem("token");
      window.location.href = "/";
    }
    return Promise.reject(error);
  }
);

// Generate return code
const generateReturnCode = (lastReturnCode) => {
  if (!lastReturnCode) return `PR/${new Date().getFullYear()}/01`;
  const parts = lastReturnCode.split("/");
  const lastNumber = parseInt(parts[2], 10);
  return `PR/${parts[1]}/${String(lastNumber + 1).padStart(2, "0")}`;
};

// Escape regex
const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

// Handle item field changes
const handleItemFieldChange = (index, field, value, items, setItems) => {
  setItems((prev) => {
    const updatedItems = [...prev];
    updatedItems[index] = {
      ...updatedItems[index],
      [field]: field === 'reason' || field === 'expiryDate' ? value : Number(value) || 0,
      totalAmount:
        field === 'quantity' || field === 'price'
          ? (Number(field === 'quantity' ? value : updatedItems[index].quantity) || 1) *
            (Number(field === 'price' ? value : updatedItems[index].price) || 0)
          : updatedItems[index].totalAmount,
    };
    if (field === 'quantity' && updatedItems[index].quantity > updatedItems[index].maxQuantity) {
      updatedItems[index].quantity = updatedItems[index].maxQuantity;
      updatedItems[index].totalAmount = updatedItems[index].maxQuantity * updatedItems[index].price;
    }
    return updatedItems;
  });
};

const PurchaseReturn = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const id = searchParams.get("id");
  const videoRef = useRef(null);
  const codeReaderRef = useRef(null);

  // Permissions
  const [localPermissions, setLocalPermissions] = useState([]);
  useEffect(() => {
    const stored = localStorage.getItem("permissions");
    if (stored) setLocalPermissions(JSON.parse(stored));
  }, []);
  const hasPermissionFor = (module, action) => {
    const role = (localStorage.getItem("role") || "guest").toLowerCase();
    if (role === "admin") return true;
    return localPermissions.some(p =>
      p.module.toLowerCase() === module.toLowerCase() &&
      p.actions.map(a => a.toLowerCase()).includes(action.toLowerCase())
    );
  };

  // State
  const [originalPurchaseRef, setOriginalPurchaseRef] = useState("");
  const [purchaseSuggestions, setPurchaseSuggestions] = useState([]);
  const [originalPurchase, setOriginalPurchase] = useState(null);
  const [returnCode, setReturnCode] = useState("");
  const [referenceNo, setReferenceNo] = useState("");
  const [purchaseDate, setPurchaseDate] = useState(new Date().toISOString().split("T")[0]);
  const [status, setStatus] = useState("Return");
  const [errorMessage, setErrorMessage] = useState("");
  const [warehouses, setWarehouses] = useState([]);
  const [suppliers, setSuppliers] = useState([]);
  const [paymentTypes, setPaymentTypes] = useState([]);
  const [accounts, setAccounts] = useState([]);
  const [selectedWarehouse, setSelectedWarehouse] = useState(null);
  const [selectedSupplier, setSelectedSupplier] = useState(null);
  const [selectedPaymentType, setSelectedPaymentType] = useState(null);
  const [selectedAccount, setSelectedAccount] = useState(null);
  const [allItems, setAllItems] = useState([]);
  const [filteredItems, setFilteredItems] = useState([]);
  const [items, setItems] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [suggestions, setSuggestions] = useState([]);
  const [searchError, setSearchError] = useState("");
  const [scanning, setScanning] = useState(false);
  const [otherCharges, setOtherCharges] = useState(0);
  const [discountOnAll, setDiscountOnAll] = useState(0);
  const [note, setNote] = useState("");
  const [paymentAmount, setPaymentAmount] = useState(0);
  const [paymentNote, setPaymentNote] = useState("");
  const [grandTotal, setGrandTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [isSidebarOpen, setSidebarOpen] = useState(false);
    // … other useState calls …
    const [couponCode,         setCouponCode]         = useState("");
    const [couponType,         setCouponType]         = useState("");
    const [couponValue,        setCouponValue]        = useState(0);
    const [discountOnAllType,  setDiscountOnAllType]  = useState("Per%");
  

  useEffect(() => {
    if (window.innerWidth < 768) setSidebarOpen(false);
  }, []);

  // Fetch initial data
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const [whRes, supRes, ptRes, acRes, itmRes, retRes] = await Promise.all([
          api.get("/warehouses"),
          api.get("/suppliers"),
          api.get("/payment-types"),
          api.get("/accounts"),
          api.get("/items"),
          api.get("/purchases?isReturn=true"),
        ]);

        setWarehouses((whRes.data.data || []).map(w => ({
          label: w.warehouseName,
          value: w._id,
          cashAccount: w.cashAccount?._id || w.cashAccount,
        })));

        setSuppliers((supRes.data.data || []).filter(s => s.supplierName).map(s => ({
          label: s.supplierName,
          value: s._id,
        })));

        setPaymentTypes((ptRes.data.data || []).map(x => ({
          label: x.paymentTypeName,
          value: x._id,
          name: x.paymentTypeName.toLowerCase(),
        })));

        setAccounts((acRes.data.data || []).map(x => ({
          label: x.accountNumber,
          value: x._id,
        })));

        // Flatten items with variant support
        const rawItems = itmRes.data.data || [];
        const flatItems = rawItems.map(it => {
          const isVariant = it.parentItemId && it.parentItemId !== it._id;
          const parentItem = isVariant ? rawItems.find(p => p._id === it.parentItemId) : null;
          return {
            _id: it._id,
            itemName: isVariant && parentItem ? `${parentItem.itemName} / ${it.itemName}` : it.itemName,
            itemCode: it.itemCode || "",
            barcodes: it.barcodes || [],
            warehouseId: it.warehouse?._id || it.warehouse || null,
            mrp: it.mrp || 0,
            parentItemId: it.parentItemId || null,
            isVariant,
            parentItemName: parentItem ? parentItem.itemName : null,
          };
        });
        setAllItems(flatItems);
        console.log("All items from /items:", flatItems);
        console.log("Checking for item 68134eff43481c8592016e2f:", flatItems.find(it => it._id === "68134eff43481c8592016e2f"));
        console.log("Variants in allItems:", flatItems.filter(it => it.isVariant));
        console.log("Items for warehouse 681115637c6cb354e6e28d7f:", flatItems.filter(it => it.warehouseId === "681115637c6cb354e6e28d7f"));

        // Return code
        const allReturns = retRes.data.data || [];
        setReturnCode(allReturns.length ? generateReturnCode(allReturns[allReturns.length - 1].purchaseCode) : `PR/${new Date().getFullYear()}/01`);
      } catch (err) {
        console.error("Fetch error:", err);
        setErrorMessage("Failed to load data: " + (err.response?.data?.message || err.message));
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  // Load existing return
  useEffect(() => {
  if (!id) return;
  const fetchPurchase = async () => {
    try {
      setLoading(true);
      const response = await api.get(`/purchases/${id}`);
      const purchaseData = response.data.data;
      console.log("Fetched purchase return:", purchaseData);

      setOriginalPurchase(purchaseData);
      setOriginalPurchaseRef(purchaseData.referenceNo || "");
      setPurchaseDate(purchaseData.purchaseDate ? dayjs(purchaseData.purchaseDate).format("YYYY-MM-DD") : new Date().toISOString().split("T")[0]);
      setReferenceNo(purchaseData.referenceNo || "");
      setSelectedWarehouse(warehouses.find(w => w.value === (purchaseData.warehouse?._id || purchaseData.warehouse)) || null);
      setSelectedSupplier(suppliers.find(s => s.value === (purchaseData.supplier?._id || purchaseData.supplier)) || null);
      setStatus(purchaseData.status || "Return");

      // Map items
      const purchaseItems = purchaseData.items || [];
      console.log("Purchase return items:", purchaseItems);
      const warehouseId = purchaseData.warehouse?._id || purchaseData.warehouse;
      const newItems = purchaseItems.map(pi => {
        const itemId = typeof pi.item === 'object' ? pi.item?._id : pi.item;
        const item = allItems.find(it => it._id === itemId || it.parentItemId === itemId) || null;

        if (!item) {
          console.warn(`No matching item for ID ${itemId} in allItems`, { purchaseItem: pi, warehouseId });
          return null;
        }

        // Format expiryDate to string (YYYY-MM-DD or "")
        const expiryDate = pi.expiryDate ? dayjs(pi.expiryDate).format("YYYY-MM-DD") : "";

        return {
          item: item._id,
          itemName: item.itemName,
          itemCode: item.itemCode,
          barcode: item.barcodes[0] || "",
          quantity: pi.quantity || 1,
          price: pi.purchasePrice || item.mrp || 0,
          maxQuantity: pi.quantity || 1,
          reason: pi.reason || "",
          totalAmount: (pi.quantity || 1) * (pi.purchasePrice || item.mrp || 0),
          expiryDate, // Ensure string format
          purchasePrice: pi.purchasePrice || 0,
          salesPrice: pi.salesPrice || 0,
          unitCost: pi.unitCost || 0,
          discount: pi.discount || 0,
          parentItemId: item.parentItemId || null,
          isVariant: item.isVariant,
        };
      }).filter(Boolean);

      console.log("Mapped return items:", newItems);
      if (newItems.length === 0 && purchaseItems.length > 0) {
        const itemsInWarehouse = allItems.filter(it => it.warehouseId === warehouseId);
        setErrorMessage(
          `No matching items found for this purchase return. ` +
          `Expected item ID: 68134eff43481c8592016e2f, ` +
          `Warehouse ID: ${warehouseId}, ` +
          `Items in allItems: ${allItems.length}, ` +
          `Items in warehouse: ${itemsInWarehouse.length}, ` +
          `Purchase items: ${purchaseItems.length}, ` +
          `Variants: ${allItems.filter(it => it.isVariant).length}. ` +
          `Check /items API response and console logs.`
        );
      }
      setItems(newItems);

      setOtherCharges(purchaseData.otherCharges || 0);
      setDiscountOnAll(purchaseData.discountOnAll || 0);
      setNote(purchaseData.note || "");
      setGrandTotal(purchaseData.grandTotal || 0);

      if (purchaseData.payments?.length > 0) {
        setPaymentAmount(purchaseData.payments[0].amount || 0);
        setPaymentNote(purchaseData.payments[0].paymentNote || "");
        setSelectedPaymentType(paymentTypes.find(pt => pt.value === (purchaseData.payments[0].paymentType?._id || purchaseData.payments[0].paymentType)) || null);
        setSelectedAccount(accounts.find(a => a.value === (purchaseData.payments[0].account?._id || purchaseData.payments[0].account)) || null);
      }
    } catch (err) {
      console.error("Fetch purchase return error:", err);
      setErrorMessage("Failed to load purchase return: " + (err.response?.data?.message || err.message));
    } finally {
      setLoading(false);
    }
  };
  fetchPurchase();
}, [id, warehouses, suppliers, paymentTypes, accounts, allItems]);

  // Derive cash accounts
  const selectedWh = warehouses.find(w => w.value === selectedWarehouse?.value);
  const cashAccounts = selectedWh?.cashAccount ? accounts.filter(a => a.value === selectedWh.cashAccount) : [];
  const mode = paymentTypes.find(p => p.value === selectedPaymentType?.value)?.name;
  const isCash = mode === "cash";

  useEffect(() => {
    if (isCash && cashAccounts.length > 0) setSelectedAccount(cashAccounts[0]);
    else setSelectedAccount(null);
  }, [isCash, cashAccounts]);

  // Search purchases
  useEffect(() => {
    const searchPurchases = async () => {
      if (!originalPurchaseRef.trim() || id) {
        setPurchaseSuggestions([]);
        return;
      }
      try {
        const response = await api.get("/purchases?isReturn=false");
        const purchases = (response.data.data || []).filter(p =>
          p.referenceNo?.toLowerCase().includes(originalPurchaseRef.toLowerCase())
        );
        setPurchaseSuggestions(purchases.map(p => ({
          label: `Purchase: ${p.referenceNo}`,
          value: p.referenceNo,
          data: p,
        })).slice(0, 10));
      } catch (err) {
        console.error("Search purchases error:", err);
        setErrorMessage("Error searching purchases: " + (err.response?.data?.message || err.message));
      }
    };
    searchPurchases();
  }, [originalPurchaseRef, id]);

  // Select purchase
  const selectPurchase = async (suggestion) => {
  try {
    const { value, data } = suggestion;
    console.log("Selected purchase:", data);
    setOriginalPurchaseRef(value);
    setOriginalPurchase(data);
    setSelectedWarehouse(warehouses.find(w => w.value === (data.warehouse?._id || data.warehouse)) || null);
    setSelectedSupplier(suppliers.find(s => s.value === (data.supplier?._id || data.supplier)) || null);
    setPurchaseDate(data.purchaseDate ? dayjs(data.purchaseDate).format("YYYY-MM-DD") : new Date().toISOString().split("T")[0]);
    setReferenceNo(data.referenceNo || "");
    setItems([]);
    setFilteredItems([]);
    setPurchaseSuggestions([]);

    // Map items
    const purchaseItems = data.items || [];
    console.log("Purchase items:", purchaseItems);
    const warehouseId = data.warehouse?._id || data.warehouse;
    const newItems = purchaseItems.map(pi => {
      const itemId = typeof pi.item === 'object' ? pi.item?._id : pi.item;
      const item = allItems.find(it => it._id === itemId || it.parentItemId === itemId) || null;

      if (!item) {
        console.warn(`No matching item for ID ${itemId} in allItems`, { purchaseItem: pi, warehouseId });
        return null;
      }

      // Format expiryDate to string (YYYY-MM-DD or "")
      const expiryDate = pi.expiryDate ? dayjs(pi.expiryDate).format("YYYY-MM-DD") : "";

      return {
        item: item._id,
        itemName: item.itemName,
        itemCode: item.itemCode,
        barcode: item.barcodes[0] || "",
        quantity: 1,
        price: pi.purchasePrice || item.mrp || 0,
        maxQuantity: pi.quantity || 1,
        reason: "",
        totalAmount: 1 * (pi.purchasePrice || item.mrp || 0),
        expiryDate, // Ensure string format
        purchasePrice: pi.purchasePrice || 0,
        salesPrice: pi.salesPrice || 0,
        unitCost: pi.unitCost || 0,
        discount: pi.discount || 0,
        parentItemId: item.parentItemId || null,
        isVariant: item.isVariant,
      };
    }).filter(Boolean);

    console.log("Mapped purchase items:", newItems);
    if (newItems.length === 0 && purchaseItems.length > 0) {
      const itemsInWarehouse = allItems.filter(it => it.warehouseId === warehouseId);
      setErrorMessage(
        `No matching items found for this purchase. ` +
        `Expected item ID: 68134eff43481c8592016e2f, ` +
        `Warehouse ID: ${warehouseId}, ` +
        `Items in allItems: ${allItems.length}, ` +
        `Items in warehouse: ${itemsInWarehouse.length}, ` +
        `Purchase items: ${purchaseItems.length}, ` +
        `Variants: ${allItems.filter(it => it.isVariant).length}. ` +
        `Check /items API response and console logs.`
      );
    }
    setItems(newItems);
  } catch (err) {
    console.error("Load purchase error:", err);
    setErrorMessage("Failed to load purchase: " + (err.response?.data?.message || err.message));
  }
};

  // Filter items
  useEffect(() => {
    if (!originalPurchase || !selectedWarehouse) {
      setFilteredItems([]);
      setSearchError(originalPurchase ? "Select a warehouse" : "Select a purchase first");
      return;
    }
    setSearchError("");

    const warehouseId = originalPurchase.warehouse?._id || originalPurchase.warehouse;
    const allowedItems = originalPurchase.items.flatMap(pi => {
      const itemId = typeof pi.item === 'object' ? pi.item?._id : pi.item;
      return allItems.filter(it => it._id === itemId || it.parentItemId === itemId);
    });

    setFilteredItems([...new Set(allowedItems)]);
    console.log("Filtered items for warehouse", warehouseId, ":", allowedItems);
  }, [selectedWarehouse, allItems, originalPurchase]);

  // Item suggestions
  useEffect(() => {
    const q = searchTerm.trim().toLowerCase();
    if (!q || !selectedWarehouse || !originalPurchase) {
      setSuggestions([]);
      return;
    }
    const rx = new RegExp(esc(q), "i");
    setSuggestions(filteredItems.filter(it =>
      rx.test(it.itemName) ||
      rx.test(it.itemCode) ||
      it.barcodes.some(b => rx.test(b))
    ).slice(0, 20));
  }, [searchTerm, filteredItems]);

  // Barcode scanner
  const startScanner = async () => {
    if (!selectedWarehouse || !originalPurchase) {
      setErrorMessage("Select warehouse and purchase first");
      return;
    }
    setSearchTerm("");
    setScanning(true);
    const codeReader = new BrowserMultiFormatReader();
    codeReaderRef.current = codeReader;

    try {
      const videoInputDevices = await codeReader.listVideoInputDevices();
      await codeReader.decodeFromVideoDevice(videoInputDevices[0]?.deviceId, videoRef.current, (result) => {
        if (result) {
          const hit = filteredItems.find(it =>
            it.barcodes.includes(result.getText()) ||
            it.itemCode === result.getText()
          );
          if (hit) pushItem(hit);
          codeReader.stopStreams();
          setScanning(false);
        }
      });
    } catch (err) {
      console.error("Scanner error:", err);
      setErrorMessage("Scanner error: " + err.message);
      setScanning(false);
    }
  };

  useEffect(() => {
    return () => {
      if (codeReaderRef.current) codeReaderRef.current.reset();
    };
  }, []);

  // Push item
  const pushItem = (item) => {
    if (!item) return;
    if (items.some(i => i.item === item._id)) {
      setErrorMessage("Item already added");
      return;
    }
    const purchaseItem = originalPurchase.items.find(pi => {
      const itemId = typeof pi.item === 'object' ? pi.item?._id : pi.item;
      return item._id === itemId || item.parentItemId === itemId;
    });
    if (!purchaseItem) {
      setErrorMessage("Item not in original purchase");
      return;
    }
    setItems(prev => [
      ...prev,
      {
        item: item._id,
        itemName: item.itemName,
        itemCode: item.itemCode,
        barcode: item.barcodes[0] || "",
        quantity: 1,
        price: purchaseItem.purchasePrice || item.mrp || 0,
        maxQuantity: purchaseItem.quantity || 1,
        reason: "",
        totalAmount: 1 * (purchaseItem.purchasePrice || item.mrp || 0),
        expiryDate: purchaseItem.expiryDate || "",
        purchasePrice: purchaseItem.purchasePrice || 0,
        salesPrice: purchaseItem.salesPrice || 0,
        unitCost: purchaseItem.unitCost || 0,
        discount: purchaseItem.discount || 0,
        parentItemId: item.parentItemId || null,
        isVariant: item.isVariant,
      },
    ]);
    setSearchTerm("");
  };

  // Handle Enter key
  const handleKeyDown = (e) => {
    if (e.key === "Enter" && suggestions.length > 0) pushItem(suggestions[0]);
  };

  // Remove item
  const handleRemoveItem = (idx) => {
    setItems(prev => prev.filter((_, i) => i !== idx));
  };

  // Calculate totals
  useEffect(() => {
    const grand = items.reduce((sum, it) => sum + it.totalAmount, 0) + Number(otherCharges || 0) - Number(discountOnAll || 0);
    setGrandTotal(Math.max(grand, 0));
  }, [items, otherCharges, discountOnAll]);
  useEffect(() => {
  if (!id) {
    setPaymentAmount(grandTotal);
  }
}, [grandTotal, id]);

  // Save
  const handleSave = async () => {
    // validation omitted for brevity…
  
    setLoading(true);
    try {
      const payload = {
        originalPurchaseRef,
        referenceNo: originalPurchaseRef,
        purchaseDate,
        warehouse: selectedWarehouse.value,
        supplier: selectedSupplier.value,
        isReturn: true,
        status,
        createdBy: localStorage.getItem("userId"),
        createdByModel: "User",
      
        items: items.map(it => ({
          // <-- use the parentItemId for `item`
          item:    it.parentItemId || it.item,
          // <-- include `variant` only when this is actually a variant
          variant: it.isVariant ? it.item : undefined,
          quantity:      it.quantity,
          purchasePrice: it.price,
          salesPrice:    it.salesPrice,
          unitCost:      it.unitCost,
          totalAmount:   it.totalAmount,
          discount:      it.discount || 0,
          reason:        it.reason || undefined,
          expiryDate:    it.expiryDate || undefined,
        })),
      
        otherCharges:  Number(otherCharges)  || 0,
        discountOnAll: Number(discountOnAll) || 0,
        note,
      
        grandTotal,
      
        payments: paymentAmount > 0 ? [{
          paymentType:  selectedPaymentType.value,
          account:      selectedAccount?.value,
          amount:       Number(paymentAmount),
          paymentNote,
          date:         new Date().toISOString(),
        }] : [],
      };
      
  
      console.log("Saving return payload:", payload);
  
      if (id) {
        await api.put(`/purchases/purchase-returns/${id}`, payload);
      } else {
        await api.post("/purchases/purchase-returns", payload);
      }
  
      navigate("/purchasereturn-list");
    } catch (err) {
      console.error("Save error:", err.response?.data || err);
      setErrorMessage(
        "Save failed: " +
        (err.response?.data?.message || err.message)
      );
    } finally {
      setLoading(false);
    }
  };
  

  if (loading) return <LoadingScreen />;

  return (
    <div className="flex flex-col h-screen">
      <Navbar isSidebarOpen={isSidebarOpen} setSidebarOpen={setSidebarOpen} />
      <div className="flex flex-grow">
        <Sidebar isSidebarOpen={isSidebarOpen} />
        <div className="flex-grow p-4 overflow-y-auto">
          <header className="flex flex-col md:flex-row items-center justify-between mb-4">
            <h1 className="text-xl font-bold">Purchase Return</h1>
            <nav className="flex items-center space-x-2 text-gray-600">
              <Link to="/dashboard" className="hover:text-cyan-600"><FaTachometerAlt className="mr-1" /> Home</Link>
              <BiChevronRight />
              <Link to="/purchasereturn-list" className="hover:text-cyan-600">Return List</Link>
            </nav>
          </header>

          {errorMessage && (
            <div className="mb-4 p-3 bg-red-100 text-red-700 rounded">{errorMessage}</div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div className="relative">
              <label className="font-semibold">Original Purchase Ref *</label>
              <input
                type="text"
                value={originalPurchaseRef}
                onChange={e => setOriginalPurchaseRef(e.target.value)}
                className="w-full p-2 border rounded"
                disabled={!!id}
              />
              {purchaseSuggestions.length > 0 && (
                <ul className="absolute z-50 w-full bg-white border rounded shadow max-h-60 overflow-y-auto mt-1">
                  {purchaseSuggestions.map((s, i) => (
                    <li
                      key={i}
                      className="p-2 hover:bg-gray-100 cursor-pointer"
                      onClick={() => selectPurchase(s)}
                    >
                      {s.label}
                    </li>
                  ))}
                </ul>
              )}
            </div>
            <div>
              <label className="font-semibold">Return Code *</label>
              <input type="text" value={returnCode} readOnly className="w-full p-2 border rounded" />
            </div>
            <div>
              <label className="font-semibold">Reference No</label>
              <input
                type="text"
                value={referenceNo}
                onChange={e => setReferenceNo(e.target.value)}
                className="w-full p-2 border rounded"
              />
            </div>
            <div>
              <label className="font-semibold">Purchase Date *</label>
              <input
                type="date"
                value={purchaseDate}
                onChange={e => setPurchaseDate(e.target.value)}
                className="w-full p-2 border rounded"
              />
            </div>
            <div>
              <label className="font-semibold">Warehouse *</label>
              <Select options={warehouses} value={selectedWarehouse} onChange={setSelectedWarehouse} />
            </div>
            <div>
              <label className="font-semibold">Supplier *</label>
              <Select options={suppliers} value={selectedSupplier} onChange={setSelectedSupplier} />
            </div>
            <div>
              <label className="font-semibold">Status</label>
              <select value={status} onChange={e => setStatus(e.target.value)} className="w-full p-2 border rounded">
                <option value="Return">Return</option>
                <option value="Cancel">Cancel</option>
              </select>
            </div>
          </div>

          <div className="relative mb-6">
            <div className="flex items-center">
              <FaBarcode className="mr-2 text-gray-600" />
              <input
                type="text"
                disabled={!selectedWarehouse || !originalPurchase}
                placeholder="Search item by name, code, or barcode"
                className="flex-grow p-2 border rounded disabled:bg-gray-100"
                value={searchTerm}
                onChange={e => setSearchTerm(e.target.value)}
                onKeyDown={handleKeyDown}
              />
              <button
                onClick={() => pushItem(suggestions[0])}
                disabled={!suggestions.length}
                className="ml-2 px-4 py-2 bg-green-600 text-white rounded disabled:bg-gray-400"
              >
                Add
              </button>
              <button
                onClick={startScanner}
                disabled={!selectedWarehouse || !originalPurchase}
                className="ml-2 p-2 bg-gray-100 rounded disabled:opacity-50"
              >
                <FontAwesomeIcon icon={faCamera} />
              </button>
            </div>
            {searchError && <p className="text-red-500 text-sm mt-1">{searchError}</p>}
            {scanning && (
              <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
                <video ref={videoRef} className="w-64 h-64" />
                <button
                  onClick={() => { codeReaderRef.current?.reset(); setScanning(false); }}
                  className="mt-4 px-4 py-2 bg-red-600 text-white rounded"
                >
                  Cancel
                </button>
              </div>
            )}
            {suggestions.length > 0 && (
              <ul className="absolute z-50 w-full bg-white border rounded shadow max-h-60 overflow-y-auto mt-1">
                {suggestions.map(it => (
                  <li
                    key={it._id}
                    className="p-2 hover:bg-gray-100 cursor-pointer"
                    onClick={() => pushItem(it)}
                  >
                    {it.itemName} ({it.itemCode})
                  </li>
                ))}
              </ul>
            )}
          </div>

          <table className="w-full border-collapse mb-6">
            <thead className="bg-sky-600 text-white">
              <tr>
                <th className="border p-2">Item</th>
                <th className="border p-2">Code</th>
                <th className="border p-2">Qty</th>
                <th className="border p-2">Price</th>
                <th className="border p-2">Expiry Date</th>
                <th className="border p-2">Reason</th>
                <th className="border p-2">Total</th>
                <th className="border p-2">Action</th>
              </tr>
            </thead>
            <tbody>
              {items.length === 0 ? (
                <tr>
                  <td colSpan="8" className="p-4 text-center text-red-600">No items to return</td>
                </tr>
              ) : (
                items.map((it, idx) => (
                  <tr key={idx}>
                    <td className="border p-2">{it.itemName}</td>
                    <td className="border p-2">{it.itemCode}</td>
                    <td className="border p-2">
                      <input
                        type="number"
                        min="1"
                        max={it.maxQuantity}
                        value={it.quantity}
                        onChange={e => handleItemFieldChange(idx, "quantity", e.target.value, items, setItems)}
                        className="w-16 p-1 border rounded"
                      />
                    </td>
                    <td className="border p-2">
                      <input
                        type="number"
                        min="0"
                        value={it.price}
                        onChange={e => handleItemFieldChange(idx, "price", e.target.value, items, setItems)}
                        className="w-16 p-1 border rounded"
                      />
                    </td>
                    <td className="border p-2">
                      <input
                        type="date"
                        value={it.expiryDate}
                        onChange={e => handleItemFieldChange(idx, "expiryDate", e.target.value, items, setItems)}
                        className="w-32 p-1 border rounded"
                      />
                    </td>
                    <td className="border p-2">
                      <input
                        type="text"
                        value={it.reason}
                        onChange={e => handleItemFieldChange(idx, "reason", e.target.value, items, setItems)}
                        className="w-full p-1 border rounded"
                      />
                    </td>
                    <td className="border p-2">{it.totalAmount.toFixed(2)}</td>
                    <td className="border p-2">
                      <button onClick={() => handleRemoveItem(idx)} className="text-red-600">Remove</button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
  {/* Other Charges */}
  <div>
    <label className="font-semibold">Other Charges</label>
    <input
      type="number"
      min="0"
      value={otherCharges}
      onChange={e => setOtherCharges(Number(e.target.value))}
      className="w-full p-2 border rounded"
    />
  </div>

  {/* Coupon */}
  <div>
    <label className="font-semibold">Coupon Code</label>
    <input
      type="text"
      value={couponCode}
      onChange={e => setCouponCode(e.target.value)}
      className="w-full p-2 border rounded"
    />
    <div className="flex space-x-2 mt-2">
      <select
        value={couponType}
        onChange={e => setCouponType(e.target.value)}
        className="flex-1 p-2 border rounded"
      >
        <option value="">Type…</option>
        <option value="percentage">Percentage</option>
        <option value="value">Fixed</option>
      </select>
      <input
        type="number"
        min="0"
        value={couponValue}
        onChange={e => setCouponValue(Number(e.target.value))}
        className="w-24 p-2 border rounded"
        placeholder="Value"
      />
    </div>
  </div>

  {/* Discount on All */}
  <div>
    <label className="font-semibold">Discount on All</label>
    <div className="flex space-x-2">
      <input
        type="number"
        min="0"
        value={discountOnAll}
        onChange={e => setDiscountOnAll(Number(e.target.value))}
        className="flex-1 p-2 border rounded"
        placeholder="Amount"
      />
      <select
        value={discountOnAllType}
        onChange={e => setDiscountOnAllType(e.target.value)}
        className="w-24 p-2 border rounded"
      >
        <option value="Per%">Per%</option>
        <option value="Fixed">Fixed</option>
      </select>
    </div>
  </div>

  {/* (You can move your existing “Note” textarea into its own full-width cell if you like) */}
  <div className="col-span-2">
    <label className="font-semibold">Note</label>
    <textarea
      value={note}
      onChange={e => setNote(e.target.value)}
      className="w-full p-2 border rounded"
      rows={3}
    />
  </div>
</div>


          <div className="mb-6 p-4 bg-gray-100 rounded">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="font-semibold">Payment Amount</label>
                <input
                  type="number"
                  min="0"
                  value={paymentAmount}
                  onChange={e => setPaymentAmount(e.target.value)}
                  className="w-full p-2 border rounded"
                />
              </div>
              <div>
                <label className="font-semibold">Payment Type</label>
                <Select options={paymentTypes} value={selectedPaymentType} onChange={setSelectedPaymentType} />
              </div>
              {isCash && (
                <div>
                  <label className="font-semibold">Account</label>
                  <Select options={cashAccounts} value={selectedAccount} onChange={setSelectedAccount} />
                </div>
              )}
              <div className="col-span-2">
                <label className="font-semibold">Payment Note</label>
                <textarea
                  value={paymentNote}
                  onChange={e => setPaymentNote(e.target.value)}
                  className="w-full p-2 border rounded"
                />
              </div>
            </div>
          </div>

          <div className="flex justify-end space-x-4">
            <button
              onClick={handleSave}
              disabled={!hasPermissionFor("PurchasesReturn", "Add")}
              className="px-4 py-2 bg-green-600 text-white rounded disabled:bg-gray-400"
            >
              {id ? "Update" : "Save"}
            </button>
            <button
              onClick={() => navigate("/purchasereturn-list")}
              className="px-4 py-2 bg-gray-600 text-white rounded"
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PurchaseReturn;